<!DOCTYPE html>
<html>
<head>
    <title>安全隐患整改详情</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta charset="utf-8" />
 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="../css/weui.css"/>
    <link rel="stylesheet" href="../css/example.css"/>
    <script src="../../../js/swiper.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
 	<script src="../../../js/jquery-weui.js"></script>
<style type="text/css">
    body, html,#allmap {width: 100%;height: 70%;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=cR98TwX2FnKTpANIOYhMYMot9a4ioxjc"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
</head>
<body>

  <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">隐患名称</label></div>
                <div id="name" class="weui-cell__bd">
                </div>
            </div>
    </div>

    <div class="weui-cells weui-cells_form">
     <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">标题</label></div>
        <div  class="weui-cell__bd">
          <input id="neaten_name" class="weui-input" />
        </div>
     </div>
    </div>
    
 
    <!--  
    <div class="weui-cells weui-cells_form">
    	<div class="weui-cell">
    		<div class="weui-cell__hd"><label class="weui-label">整改进度</label></div>
    			<div class="weui-cell__bd">
       		 		<div class='demos-content-padded'>
            			<div class="weui-slider-box" id='slider2'>
               				 <div class="weui-slider">
                    			<div id="sliderInner" class="weui-slider__inner">
                        			<div id="sliderTrack" style="width: 0%;" class="weui-slider__track"></div>
                        			<div id="sliderHandler" style="left: 0%;" class="weui-slider__handler"></div>
                   				 </div>
                			</div>
            	 	   </div>            		   
        			</div>
  	  			</div>
  	  			<div id="progress_img" class="weui-cell "></div>  
    	</div>
    </div>
 -->
   
   
   <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
             <div class="weui-cell__hd"><label class="weui-label">整改进度</label></div>
                <div id="progress" class="weui-cell__bd">
                </div>
            <div id="progress_img" class="weui-cell weui-cell_warn">                  
            </div>
         </div>
    </div>

   
  <div class="weui-cells weui-cells_form">
     <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">整改人员</label></div>
        <div  class="weui-cell__bd">
          <input id="principal" class="weui-input" />
        </div>
     </div>
    </div>
  
  <div class="weui-cells weui-cells_form">
     <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">整改时间</label></div>
        <div  class="weui-cell__bd">
         <input id="happenTime" class="weui-input" type="date"/>
        </div>
     </div>
    </div>

  
  <div class="weui-cells weui-cells_form">
     <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">备注</label></div>
        <div  class="weui-cell__bd">
         <input id="remark" class="weui-input" />
        </div>
     </div>
    </div>
  
    <div class="weui-cells__title">整改内容</div>
    <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                  <textarea id="neaten_instance" class="weui-textarea" rows="3"></textarea>
                </div>
            </div>
        </div>


 <div class="weui-cells__title">整改位置</div>
 <div id="allmap"></div>   
    
  <!--    <div class="weui-panel weui-panel_access">
     <div class="weui-panel__hd">安全整改图片</div>  
       <div id="img" class="weui-panel__bd">
       </div>  
       <div class="weui-uploader__input-box" id="showPicker">
       </div>   
    </div>  
	-->
	
 <a href="javascript:;" id="save" class="weui-btn weui-btn_plain-primary">保存</a>
	
</body>

<script type="text/javascript">
  function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
   }

  var guid=getQueryString("guid");

  var longitude=getQueryString("longitude");
  var latitude=getQueryString("latitude");
  
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例

	var point = new BMap.Point(longitude, latitude);
    
    var pointStart=point;

	var str = "我的位置";
	var opts = {
			   position : point,    // 指定文本标注所在的地理位置
			   offset   : new BMap.Size(-getByteLen(str)*3, 5)    //设置文本偏移量
			}	
	var label = new BMap.Label(str, opts);  // 创建文本标注对象
	label.setStyle({
					 fontSize : "12px",
					 height : "20px",
					 lineHeight : "20px",
					 fontFamily:"微软雅黑"
				  });
    map.addOverlay(label);
    map.enableScrollWheelZoom(true);
    
    var geoc = new BMap.Geocoder();
  	
	function keyDown(e) {   		  
	　   var keycode = e.which;   //取得对应的键值（数字）  	  
	　   var realkey = String.fromCharCode(e.which); //取得代表改键的真正字符  
	   var val = document.getElementById("input").value;
	　   if(keycode==13){
		   local.search(val);
	　   }
	 }     
        
    
    
    /*
    var progress=0;
	$('#slider2').slider(function (progre) {
        console.log(progre);
        progress=progre/100;
        if(progre==0){
      	  type="未整改";
      	  progress_img.setAttribute("class","weui-icon-cancel");
        }else if(progre>0&&progre<100){
      	  type="整改中";
      	  progress_img.setAttribute("class","weui-icon-info-circle");  
        }else if(progre==100){
      	  type="已整改";
      	  progress_img.setAttribute("class","weui-icon-success");
        }
    });
	*/
	
	var select = document.createElement("select");
	select.setAttribute("id","select");
	select.setAttribute("onchange","gradeChange()");

	var option = document.createElement("option");
	option.innerHTML="未整改";
	option.setAttribute("value",0);
	select.appendChild(option);	 

	var option = document.createElement("option");
	option.innerHTML="整改中";
	option.setAttribute("value",1);
	select.appendChild(option);		

	var option = document.createElement("option");
	option.innerHTML="整改完成";
	option.setAttribute("value",2);
	select.appendChild(option);	

	select.setAttribute("class","weui-input");
	$("#progress").append(select);	

	var progress="未整改";

	function gradeChange(){ 
    var objS = document.getElementById("select"); 
    var grade = objS.options[objS.selectedIndex].value; 
    console.log(objS.options[objS.selectedIndex]);
    progre=grade;
    if(progre==0){
    	  progress="未整改";
    	  progress_img.setAttribute("class","weui-icon-cancel");
      }else if(progre==1){
    	  progress="整改中";
    	  progress_img.setAttribute("class","weui-icon-info-circle");  
      }else if(progre==2){
    	  progress="整改完成";
    	  progress_img.setAttribute("class","weui-icon-success");
      }
   } 
	
	$.post('/shambles/mobile/register/userinfoByopenId.do', {
		campusId:1
       },function(data){
    	   var obj = $.parseJSON(data);
    	   if(obj.name!=null)
    	   $("#principal").val(obj.name);
       });
	
	$.ajax({
        type: "POST",
        url: "/shambles/mobile/hidden/selectHiddenByGuid.do",
        data: { "guid":guid},
        dataType: "json",
        error: function (request){
     	   console.log(request);
        },
        success: function (text) {              	   
     	   var obj=text.hidden;
     	   var imgs=text.fileBytes;
  
             	   var guid=obj.guid;
  
             	   var distance=null;
             	   console.log(obj.name+"   "+obj.detail+"  "+obj.lng+"   "+obj.lat);
             	   if(obj.lng!=""&&obj.lat!=""){
             	   	  distance=getDistance(obj.lng,obj.lat);
             	   	var point = new BMap.Point(obj.lng,obj.lat);
             	    var pointEnd=point;
             	    map.centerAndZoom(point, 12);
             	    var marker = new BMap.Marker(point); // 创建点
             		map.addOverlay(marker);    //增加点
             	   }
             	  
             	  navigation(pointStart, pointEnd);
             	               	            	  
             	  var name=document.createElement("span");
                  name.innerHTML=obj.name;
                  $("#name").append(name);
                  console.log(obj.progress);
                  var progress=obj.progress;

                  if(progress=="未整改"){
                	  progress_img.setAttribute("class","weui-icon-cancel");
                	  document.getElementById("select")[0].selected=true;
                  }else if(progress=="整改中"){
                	  progress_img.setAttribute("class","weui-icon-info-circle"); 
                	  document.getElementById("select")[1].selected=true;
                  }else if(progress=="整改完成"){
                	  progress_img.setAttribute("class","weui-icon-success");
                	  document.getElementById("select")[2].selected=true;
                	  
                	  $.alert("隐患已整改完成!", "提 示", function() {
      	    			  //点击确认后的回调函数
      	    				history.back();
      	    			});
                	  
                  }

        	}
    });
	
	function actionTime(value){
  	    var date = new Date(value); 
  	    Y = date.getFullYear() + '-';
  	    M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
  	  	D = date.getDate()<10?'0'+date.getDate():date.getDate();
  	    h = date.getHours() + ':';
  	    m = date.getMinutes() + ':';
  	    s = date.getSeconds(); 
  		return Y+M+D;
  	}
	

    
    function getByteLen(val) {    //传入一个字符串
        var len = 0;
        for (var i = 0; i < val.length; i++) {
            if (val[i].match(/[^\x00-\xff]/ig) != null) //全角 
                len += 2; //如果是全角，占用两个字节  如果mysql中某字段是text, 如果设置编码为utf-8,那么一个中文是占3个字节, gbk是两个字节
            else
                len += 1; //半角占用一个字节
        }
        return len;
     }  
    
    function getDistance(lng,lat){
    	var pointA = new BMap.Point(longitude,latitude);  // 创建点坐标A--大渡口区
    	var pointB = new BMap.Point(lng,lat);  // 创建点坐标B--江北区
    	var d=map.getDistance(pointA,pointB)/1000;
    	return d.toFixed(2)+' KM';  //获取两点距离,保留小数点后两位
    }
    
  //线路
    function navigation(p1, p2) {
            var points = [p1,p2];
        	var curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
        	map.addOverlay(curve);
    }
    
  //happenTime设置为当前时间
	var timestamp=actionTime(Date.parse(new Date()));
    console.log(timestamp);
    $("#happenTime").val(timestamp); 
  
    $("#save").on("click",function(){

    	console.log("guid="+guid);
    	
    	geoc.getLocation(point, function(rs){
    	    var addComp;
    	  	addComp = rs.addressComponents;
        	
        	var neaten_name=$("#neaten_name").val();        	
        	var principal=$("#principal").val();
        	var happenTime=$("#happenTime").val();
        	var remark=$("#remark").val();
        	var neaten_instance=$("#neaten_instance").val();
        	var addComp1=JSON.stringify(addComp);

        	 $.post("/shambles/mobile/hidden/insertHiddenNeaten.do",
        		  {
 					guid:guid,
        		 	neaten_name:neaten_name,
    		    	happenTime:happenTime,
    		    	principal:principal,
    		    	progress:progress,
    		    	state:progress,
    		    	remark:remark,
    		    	neaten_instance:neaten_instance,
    		    	addComp:addComp1,
    		    	lng:longitude,
    		    	lat:latitude
    		    }, function(data){
    	        	var obj = $.parseJSON(data);
    		    	if (obj.status == 0) {
    		        	alert("新建"+name+"隐患整改记录失败!");
    		        	console.log(obj.status);
    		        } else if (obj.status == 1) {
    		            //存储到服务器成功后的处理
    		            //
    		            var neaten_id=obj.neaten_id;
    		        	//alert("新建"+name+"隐患整改记录成功!");
    		        	
    		        	//location.href="NeatenInfoDetail.html?neaten_id="+neaten_id+"&latitude="+latitude+"&longitude="+longitude;

    		            $.alert("新建"+name+"隐患整改记录成功!","",function(){
    		        		
   		        		 $.confirm("是否上传隐患整改记录"+name+"的照片", function() {
      	     	    			//点击确认后的回调函数
      			            	
      	     	    			location.href="NeatenInfoDetail.html?neaten_id="+neaten_id+"&latitude="+latitude+"&longitude="+longitude;
      	     	    			
      			            	}, function() {
      	     	    			//点击取消后的回调函数
      	     	    			
      	     	    			history.back();
      	     	    			
      	     	    		});
   		        		 
   		        		});
    		        	
    		       	 }else{
    			        	
    			        	$.alert("新建隐患整改记录失败!");
    			        	
    			     }
    		    });
    	  
    	   }); 
    	
    });

</script>

<script src="../../../js/previewImage.min.js"></script>

<script>
 
 var im = {};
 /**
  * 得到多个元素
  * @public
  */
 im.all = function(selector, contextElement) {
     var nodeList,
         list = [];
     if (contextElement) {
         nodeList = contextElement.querySelectorAll(selector);
     } else {
         nodeList = document.querySelectorAll(selector);
     }
     if (nodeList && nodeList.length > 0) {
         list = Array.prototype.slice.call(nodeList);
     }
     return list;
 }

 /**
  * 将事件委托给父元素
  * @public
  * @param  array     $el         父元素
  * @param  string    eventType  事件类型名称
  * @param  string    selector   目标的选择器
  * @param  function  fn
  */
 im.delegate = function($el, eventType, selector, fn) {
     if (!$el) { return; }
     $el.addEventListener(eventType, function(e) {
         var targets = im.all(selector, $el);
         if (!targets) {
             return;
         }
         // findTarget:
         for (var i=0; i<targets.length; i++) {
             var $node = e.target;
             while ($node) {
                 if ($node == targets[i]) {
                     fn.call($node, e);
                     break; //findTarget;
                 }
                 $node = $node.parentNode;
                 if ($node == $el) {
                     break;
                 }
             }
         }
     }, false);
 };


 im.delegate(document.querySelector('#img'), 'click','img',function(){
	 
	 var urls = [];
	 var imgs = im.all('img',im.all('#img')[0]);
	 imgs.forEach(function(v,i){
	     urls.push(v.src);
	 })
     
	 var thisStr = this.src;
	 var current = thisStr.replace(/\/compressFile/, "");
	 console.log(current);
     var obj = {
         urls : urls,
         current : current
     };
     previewImage.start(obj);
 });
 
</script>
